<template>
    <cu-scroll is-scroll ref="myScroll" :on-refresh="onRefresh" :on-pull="onPull" :get-scroll-top="getTop">
        <img alt="Vue logo" src="../../assets/logo.png">
        <div class="font">编译后的尺寸（实际显示字体14px,宽375px）</div>
        <div style="font-size:14px;width:375px;background-color:#000;color:#fff;">真实设计尺寸(字体28px，宽750px)</div>
        <van-row class="user-links">
            <van-col span="24">
                <van-icon name="pending-payment" />
                待付款1
            </van-col>
        </van-row>
        <div id="v_container" style="width: 150px;height: 50px;"></div>
        <van-cell-group>
            <van-field v-model="qwe" placeholder="请输入用户名" />
        </van-cell-group>
        <van-button type="default" size="small" @click="qweqwe">验证</van-button>
        <van-cell-group>
            <van-cell icon="records" title="全部订单" is-link />
            <van-cell icon="exchange" title="我的积分" is-link />
            <van-cell icon="gold-coin" title="我的优惠券" is-link />
            <van-cell icon="gift" title="我收到的礼物" is-link />
        </van-cell-group>
        <van-button type="default" size="small">默认按钮</van-button>
        <van-button type="primary" size="small">主要按钮</van-button>
        <van-button block type="info">信息按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <van-button type="danger">危险按钮</van-button>
        <ul class="li-box">
            <li v-for="(x,index) in list" :key="index">数据</li>
        </ul>
        <van-button round type="primary" @click="setTop">返回顶部</van-button>
    </cu-scroll>
</template>

<script>
import Vue from 'vue';
import { createNamespacedHelpers } from 'vuex';
import {
    Row, Col, Icon, Cell, CellGroup, Button,
} from 'vant';
import { Field } from 'vant';
import { ApiCharts } from '@/API/api';
import GVerify from '@/libs/GVerify';

const { mapState, mapActions, mapMutations } = createNamespacedHelpers('user');

Vue.use(Button);
Vue.use(Field);

export default {
    name: 'home',
    components: {
        [Row.name]: Row,
        [Col.name]: Col,
        [Icon.name]: Icon,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
    },
    data() {
        return {
            list: [],
            page: {
                counter: 1,
                pageStart: 1,
                pageEnd: 1,
                total: 10,
                scrollTop: 0,
            },
            qwe: '',
            verifyCode: '',
        };
    },
    computed: {
        ...mapState(['userInfo']),
    },
    mounted() {
        console.log('userInfo=>>', this.userInfo);
         this.verifyCode = new GVerify("v_container");
    },
    methods: {
        qweqwe(){
             var res = this.verifyCode.validate(this.qwe);
            if(res){
                alert("验证正确");
            }else{
                alert("验证码错误");
            }
        },
        // 下拉刷新
        onRefresh() {
            this.getServeData('refresh');
        },
        // 上滑加载
        onPull() {
            this.getServeData();
        },
        async getServeData(type = 'add') {
            if (type === 'add') {
                if (this.page.counter >= this.page.total) return;
                this.page.counter++;
                this.$refs.myScroll.setState(4);
            } else {
                this.list = [];
                this.page.counter = 1;
            }
            this.$refs.myScroll.showLoading = true;
            const { data: { success, data } } = await ApiCharts().stream({
                params: {
                    a: 1,
                },
            });
            this.$refs.myScroll.showLoading = false;
            if (success) {
                this.$refs.myScroll.ScrollTop(this.page.scrollTop - 100);
                const result = Object.keys(data);
                type === 'add'
                    ? this.list = this.list.concat(result)
                    : this.list = result;
            } else {
                this.$notify('获取信息失败！');
            }
            this.page.counter >= this.page.total
                ? this.$refs.myScroll.setState(7)
                : type === 'add' ? this.$refs.myScroll.setState(5) : this.$refs.myScroll.setState(3);
        },
        getTop(y) { // 滚动条位置
            this.page.scrollTop = y;
        },
        setTop() {
            const scrollTop = this.$tween.fade({x: this.page.scrollTop}, {x: 0}, 5000, 'Linear');
            this.$refs.myScroll.ScrollTop(scrollTop);
        },
    },
};
</script>
<style scoped lang="less">
    .user-links{
        color: #333;
    }
    .font{
        font-size: 28px;
        color: #fff;
        background-color: green;
        width: 750px;
    }
    .li-box{
        li{
            color: #333;
        }
    }
</style>
